<template>

    <el-form label-width="100px" :model="addInfo" :rules="rules" ref="addInfo">
        <el-form-item label="账号" prop="account">
            <el-input type="text" placeholder="请输入账号" v-model="addInfo.account"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password" v-if="type == 'adds' ? true : false">
            <el-input type="text" placeholder="请输入密码" v-model="addInfo.password"></el-input>
        </el-form-item>
        <el-form-item label="用户组" prop="userGroup">
            <el-select v-model="addInfo.userGroup" placeholder="请选择用户组">
                <el-option value="超级管理员" label="超级管理员"></el-option>
                <el-option value="普通管理员" label="普通管理员"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="add">确认</el-button>
            <el-button @click="submit">{{ type == 'adds' ? '重置' : '取消'}}</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
// import axios from "@/utils/requests";
export default {
    // 
    props: {
        type: {
            type: String,
            default: ''
        },
        // 父组件传过来的数据
        defaultForm: {
            type: Object,
            // 默认值一个空对象
            default: () => ({})
        }
    },
    // 监听父组件传的数据是否发生变化，变化之后执行一次
    watch: {
        defaultForm: {
            handler: function () {
                // 当type=edit时，将父组件传过来的数据赋值给goodsAdd
                if (this.type === 'edit') {
                    this.addInfo = { ...this.defaultForm }
                    // console.log(this.defaultForm);
                    // 图片处理
                }
            },
            // 立即执行一次
            immediate: true
        }
    },
    data() {
        const validateAcc = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请输入账号！！"));
            } else {
                callback();
            }
        };
        const validatePwd = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请输入密码！！"));
            } else {
                callback();
            }
        };
        return {
            value: "",
            addInfo: {
                account: "",
                password: "",
                userGroup: "",
            },
            dialogFormVisible: false,
            rules: {
                account: [{ required: true, validator: validateAcc, trigger: "blur" }],
                password: [{ required: true, validator: validatePwd, trigger: "blur" }],
                userGroup: [{ required: true, message: "请选择用户组！！" }],
            },
        };
    },
    methods: {
        submit() {
            this.type == 'adds' ? this.resetForm('addInfo') : this.dialogFormVisible = false
            this.$emit('cancel', false)
        },
        add() {
            // console.log(this.addInfo);
            this.$refs.addInfo.validate(async (res) => {
                if (res) {
                    this.$emit('success', this.addInfo)
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
    },
};
</script>

<style lang="less" scoped>
.remove {
    /deep/ .el-form-item__label:before {
        display: none;
    }
}

.el-input {
    width: 300px;
}
</style>